<template>
    <div class="container">
        <layout :imgUrl="imgUrl" class="layout" v-show="!showMap">
            <div class="wrapper"  >
                <van-form @submit="onSubmit">
                    <van-field
                        v-model="formData.villageName"
                        name="小区名称"
                        label="小区名称"
                        placeholder="请输入小区名称"
                        required
                        clearable
                        :rules="[{required:true,message:'请输入小区名称'}]"
                    ></van-field>

                    <van-field
                        @click="showMap = true"
                        v-model="villageAddress"
                        name="地区"
                        label="地区"
                        readonly
                        placeholder="请选择地区"
                        required
                        clearable
                        :rules="[{required:true,message:'请选择地区'}]"
                    ></van-field>

                    <van-field
                        @click="showStreetPicker=true"
                        readonly
                        v-model="streetName"
                        name="街道"
                        label="街道"
                        placeholder="请选择街道"
                        required
                        clearable
                        :rules="[{required:true,message:'请选择街道'}]"
                    ></van-field>

                    <van-field
                        v-show="villageAddress"
                        v-model="formData.villageDetailAddress"
                        name="详细地址"
                        label="详细地址"
                        readonly
                        placeholder="详细地址"
                        required
                        clearable
                        :rules="[{required:true,message:'详细地址'}]"
                    ></van-field>

                    <van-field
                        v-model="formData.pmcName"
                        name="物业名称"
                        label="物业名称"
                        placeholder="请输入物业名称"
                        required
                        clearable
                        :rules="[{required:true,message:'请输入物业名称'}]"
                    ></van-field>

                    <van-field
                        v-model="formData.pmcPhone"
                        name="物业电话"
                        label="物业电话"
                        placeholder="请输入物业电话"
                        required
                        clearable
                        :rules="[{required:true,message:'请输入物业电话'}]"
                    ></van-field>

                    <van-field
                        v-model="formData.pmcPhoneTwo"
                        name="物业备用电话"
                        label="物业备用电话"
                        placeholder="请输入物业备用电话"
                        required
                        clearable
                        :rules="[{required:true,message:'请输入物业备用电话'}]"
                    ></van-field>

                    <van-field
                        name="120行车路线"
                        label="120行车路线"
                        placeholder="请输入120行车路线"
                        required
                        clearable
                        :rules="[{required:true,message:'请输入120行车路线'}]"
                    ></van-field>

                    <van-field
                        v-model="formData.sosPhone"
                        name="120电话"
                        label="120电话"
                        placeholder="请输入120电话"
                        required
                        clearable
                        :rules="[{required:true,message:'请输入120电话'}]"
                    ></van-field>


                    <div class="btn">
                            <van-button round block type="info" native-type="submit">提 交</van-button>
                    </div>
                </van-form>
            </div>
            <van-popup v-model="showStreetPicker" position="bottom" round>
                <van-picker
                    show-toolbar
                    :columns="streetList"
                    value-key="name"
                    @confirm="confirmStreet"
                    @cancel="showStreetPicker = false"
                />
                </van-popup>
        </layout>

        <iframe v-show="showMap" id="mapPage" width="100%" height="100%" frameborder=0 src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=PYGBZ-2IGL6-OTPSQ-MG5KP-A2ZN3-BMBHK&referer=klab-h5"></iframe>
    </div>
    
</template>

<script>
    import addVillageApi from '@/api/addVillage.js'
    export default {
        data(){
            return{
                imgUrl:require("@/assets/images/disanfang1.jpg"),
                formData:{
                    villageName:"",
                    villageDetailAddress:"",
                    streetId:"",
                    pmcName:"",
                    pmcPhone:"",
                    pmcPhoneTwo:"",
                    sosRoute:"",
                    sosPhone:"",
                    latitude:"",
                    longitude:"",
                },
                latitude:"",
                longitude:"",
                villageAddress:"",
                streetName:"",
                showMap:false,
                streetList:[
                    {id:1,name:"月亮岛街道"},
                    {id:2,name:"北京街道"},
                    {id:3,name:"33街道"},
                    {id:4,name:"22街道"},

                ],
                showStreetPicker:false,
            }
        },
        mounted(){
            let _this = this
            window.addEventListener('message', function(event) {
                // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
                var res = event.data;
                if (res && res.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
                    console.log('location', res);
                    _this.longitude = res.latlng.lat
                    _this.latitude = res.latlng.lng
                    _this.villageAddress = res.cityname
                    _this.formData.streetId = ""
                    _this.streetName = ""
                    _this.showMap = false
                    _this.getAddress()
                }
            }, false)
        },
        methods:{
            onSubmit(){
                
            },
            // 逆转地址解析获取省市区
            getAddress(){
                let params = {
                    key:"PYGBZ-2IGL6-OTPSQ-MG5KP-A2ZN3-BMBHK",
                    location:this.latitude+','+this.longitude
                }
                addVillageApi.getAddress(params).then(res=>{

                    console.log(res,184)
                    this.getAddress()
                })
            },
            getStreetList(){
                
            },
            confirmStreet(val){
                this.showStreetPicker = false
                this.formData.streetId = val.id
                this.streetName = val.name
            }
        }
    }
</script>

<style lang="less" scoped>
    .container{
        height: 100vh;
        .layout{
            &::v-deep .footer{
                display: none;
            }
            .wrapper{
                background: white;
                box-sizing: border-box;
                overflow: hidden;
                border-radius: 10px;
                width: 93%;
                margin: auto;
                box-shadow: 0 0 10px 0 rgba(0, 0, 0, 10%);
            .btn{
                margin: 20px;
            }
        }
        }
        
    }
    
</style>